<script>
import {mapState} from "vuex";

export default {
  name: "carousel",
  props: {
    bannerList: {
      type: Array,
      default: () => ([])
    }
  },
  methods: {
    /* 点击某一项轮播图的回调函数 */
    goGoodDetail(item) {
      // 使用编程式路由导航跳转到商品详情页并且携带当前项的ID
      uni.navigateTo({
        url: `/subPackages/detail/detail?goods_id=${item.goods_id}`
      })
    }
  },

}
</script>

<template>
  <swiper class="carousel" indicator-dots autoplay circular :interval="2000" :duration="500" indicator-active-color="#ff6000">
    <swiper-item v-for="(item,index) in bannerList" :key="item.goods_id" @click="goGoodDetail(item)">
      <image :src="item.image_src"/>
    </swiper-item>
  </swiper>
</template>

<style scoped lang="scss">
.carousel {
  width: 100%;
  height: 400rpx;

  image {
    width: 100%;
    height: 400rpx;
    object-fit: cover;
  }
}
</style>
